<template>
  <div class="big-zoom">
    <div id="zhuti">
      <div id="small">
        <div id="mask"></div>
        <img :src="imgData[imgIndex].small" />
      </div>
      <div id="big">
        <img id="bigimg" :src="imgData[imgIndex].big" />
      </div>
      <div class="thumbnail-content">
        <ul >
          <!-- <li class="fl" @click="changeImg(index)" v-for="(item,index) in imgData" :key="item"> -->
          <li class="fl" @mouseenter="changeImg(index)" v-for="(item,index) in imgData" :key="item">
            <img :src="item.thumbnail" />
          </li>
        </ul> 
      </div>
	  </div>
  </div>
</template>
<script>
export default {
  props: {
    imgData: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      small: '',
      big: '',
      mask: '',
      zhuti: '',
      bigimg: '',
      imgIndex: 0
    }
  },
  mounted () {
    this.small = this.$('small')
    this.big = this.$('big')
    this.mask = this.$('mask')
    this.zhuti = this.$('zhuti')
    this.bigimg = this.$('bigimg')
    this.small.onmouseenter = this.onmouseenterAction
    this.small.onmouseleave = this.onmouseleaveAction
    this.small.onmousemove = this.onmousemoveAction
  },
  methods: {
    changeImg (index) {
      this.imgIndex = index
    },
    $ (id) {
      return document.getElementById(id)
    },
    onmouseenterAction () {
      this.big.style.display = 'block'
      this.mask.style.display = 'block'
    },
    onmouseleaveAction () {
      this.big.style.display = 'none'
      this.mask.style.display = 'none'
    },
    onmousemoveAction (event) {
      // 获得当前坐标 // 减去镜头宽度的一半
      var left = event.clientX - this.zhuti.getBoundingClientRect().left - this.mask.offsetWidth / 2
      var top = event.clientY - this.zhuti.getBoundingClientRect().top - this.mask.offsetHeight / 2
      // 进行判断语句（固定0的位置）
      if (left <= 0) { // 左
        left = 0
      }
      if (top <= 0) { // 上
        top = 0
      }
      if (left >= this.small.offsetWidth - this.mask.offsetWidth) { // 右
        left = this.small.offsetWidth - this.mask.offsetWidth
      }
      if (top >= this.small.offsetHeight - this.mask.offsetHeight) { // 下
        top = this.small.offsetHeight - this.mask.offsetHeight
      }
      // 小图的比例
      var smallX = left / (this.small.offsetWidth - this.mask.offsetWidth)
      var smallY = top / (this.small.offsetHeight - this.mask.offsetHeight)
      var bigX = -smallX * (this.bigimg.offsetWidth - this.big.offsetWidth)
      var bigY = -smallY * (this.bigimg.offsetHeight - this.big.offsetHeight)
      // 求a和b的值
      this.bigimg.style.left = bigX + 'px'
      this.bigimg.style.top = bigY + 'px'
      // 镜头距离左边的位置==鼠标距离左边的位置
      this.mask.style.left = left + 'px'
      this.mask.style.top = top + 'px'
    }
  }
}
</script>
<style lang="scss" scoped>
	#zhuti{ 
    margin: 0;
		padding: 0;
		position: relative;
    .thumbnail-content{
      width:420px;
      text-align: center;
      ul{
        overflow: hidden;
        display: inline-block;
        li{
          margin: 5px;
          border: 1px solid #000;
        }
      }
    }
	}
	#small{
    position:relative;
		width: 418px;
		height: 418px;
		border: 1px solid #000;
		overflow:hidden;
	}
	#small img{
		width: 100%;
	}
	#big{
		border: 1px solid #666;
		overflow: hidden;
		width: 418px;
		height: 418px;
    z-index: 999;

	  // 形状相同，但是大小变化是对位不准
		// width: 518px;
		// height: 518px;
	
		position: absolute;
		left: 448px;
		top: 0px;
		display: none; 
	}
	#mask{
		width: 218px;
		height: 218px;
    // width: 100px;
		// height: 100px;
		background: #666;
		opacity: 0.3;
		position: absolute;
		display: none;
	}
	#bigimg{
		position: absolute;
	}
</style>
